<script setup>
import { ref } from "vue";
import About from "./About.vue";
import AboutModal from "./AboutModal.vue";
const modelactive = ref(false);
const toggleModal = () => {
  modelactive.value = !modelactive.value;
};
</script>
<template>
  <div class="mt-2 p-2 mx-auto flex">
    <h2
      class="text-slate-800 text-3xl font-extrabold text-center uppercase tracking-wider"
    >
      <slot>header</slot>
    </h2>
    <div class="flex items-center ml-4">
      <About
        class="w-6 h-6 cursor-pointer transition duration-300 hover:scale-105 hover:text-rose-400"
        @click="toggleModal"
      ></About>
    </div>
    <AboutModal :modelactive="modelactive" @close-model="toggleModal">
      <div class="text-slate-800 tracking-wide leading-relaxed">
        <h2 class="text-xl font-semibold my-2">“井”字棋游戏说明</h2>
        <p class="text-slate-600">
          井字棋，英文名叫Tic-Tac-Toe，是一种在3*3格子上进行的连珠游戏，由于棋盘一般不画边框，格线排成“井”字故得名。由分别代表O和X的两个游戏者轮流在格子里留下标记（一般来说先手者为X），任意三个标记形成一条直线，则为获胜。
        </p>
        <p class="text-rose-400">
          赢我每一局，可截图找隔壁老王领100块钱，门票只要1毛钱
        </p>
      </div>
    </AboutModal>
  </div>
</template>
<style scoped></style>
